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Chapter  2 - HTML 

Charles  Severance 
www.dr-chuck.com 


These  slides  intended  for  use  with  the  text  book,  “Building  your  Own  Web  Site  the  Right  Way  Using 

HTML  & CSS”  by  Ian  Lloyd,  and  Available  from  Sitepoint  books. 


The  Web  is  a Young  Technology 


• Invented  in  early  I990’s 

• Popular  in  1994 

• Robert  Cailliau  - 
coFounder  of  theWorld- 
Wide-Web 


http://www.dr-chuck.com/media.php?id=70 


The  big  picture... 


<!DOCTYPE  html  PUBLIC  "-//W3C//DTD  XHTML  1.0  Strict//EN 
"http://www.w3.org/TR/xhtml  I /DTD/xhtml  I -strict.dtd" > 

<html  xmlns="http://www.w3.org/ 1 999/xhtml"  xml:lang="en"> 
<head> 

<title>University  of  Michigan</title> 


A web  server  produces  HTML 
which  is  handed  to  a browser  which 
needs  to  lay  it  out  in  a blink  of  an 
eye  and  have  it  pixel  perfect  as  god 
as  a print  brochure. 
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HTML  has  evolved  a *lot*  over 
the  years  - as  computers  and 
networks  have  gotten  faster. 
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Entertainment  | Sports  | Video 

3)  Coach's  tirade  challenged 

1 Oklahoma  State  coach  Mike  Gundy 
expressed  outrage  at  a journalist,  but 
now  she's  fighting  back.  » Details 
Cx  Watch  tirade  • Polls  • Scoreboard 
Q,  Search  for  full-length  coaching  tirade 
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» More  Featured 


• Myanmar  imposes  curfew  in  wake  of  protests  fit  Monks  defiant 

• Cubans  walk  out  during  Bush  U.N.  speech  'Cruel  dictator1 

• Israel  seeks  exemption  to  strict  rules  on  importing  nuclear  fuel 

• Gingrich  says  skipping  black  forum  a mistake  for  GOP  '08  race 
■ Iraq's  mostly  peaceful  Kurdish  zone  works  to  rebuild  economy 

• Eight  more  cases  of  deadly  Ebola  virus  confirmed  in  Congo 
e information,  choose  Activity  from  the  Window  m 


5.05  Try 

SAVINGS  ACCOUNT 

► NO  MINIMUMS  ► NO  ACCOUNT  FEES 


OPEN  AN  ACCOUNT  IN  MINUTES 


ETRADE  Bank  Member  Ft 


E*TRADE 


Get  a Great  Rate  Now  - Ad  Feedback 
Be  a Better  Work  Fashionista 


An  Iterative  Process 


• Designers  want  to  do  something 

• They  figure  out  how  to  do  it  with  current  generation  browsers 

• We  figure  out  requirements  - but  HMTL  gets  uglier  and  quirkier  - then  the 
HTML  starts  to  break 

• We  develop  new  standards  that  handle  new  requirements  in  an  elegant 
manner 

• New  Browsers  arrive  in  the  marketplace  with  the  new  standard 


History  of  HTML  / CSS 

HTML  1.0  - 1993  - The  Good  Old  Days  - life  was  simple 
HTML  2.0  - 1995  - Some  interesting  layout  features  - abused 
CSS  1-1996 
HTML  3.2-  1997 

HTML  4.0  - 1997  - Layout  moving  toward  CSS 
CSS  Level  2 - 1998 


HTML  4.01  - 1999  -What  we  use  today 


HTML  has  evolved  a *lot*  over 
the  years  - as  computers  and 
networks  have  gotten  faster. 


The  Good  Old  Days 


<h  I >Hello  World</h  I > 
Hi  there. 

<p><img  src=”x.gif”> 

A Paragraph 
<ul> 

<li>List  one 
<li>List  2 
</ul> 


In  the  good  old  days  you 
wrote  HTML  and  browsers 
displayed  it  - since  we  wrote  it 
by  hand  - and  modems  were 
slow  - it  was  never  too  long 
and  never  too  complex.  The 
browser  was  never  the  rate 
limiting  factor. 

Writing  HTML  was  like  using 
a simple,  weak  word 
processor.  The  tags  acted  as 
formatting  commands  to  the 
browser. 


HTML  Tag  Basics 

Start  tag 

End  tag 

<h  1 >Hello  World</h  1 > ^ 

Tags  “mark  up”  the  HTML 
document.  The  tags  are  read  and 
interpreted  by  the  browser  - but 

Attribute 

now  shown. 

<img  src=”x.gif”  /> 

A self  closing  tag  does  not  need  a 

\ ^ 

corresponding  end  tag. 

Self-closing  tag 

The  Ugly  Middle  Ages 


• Web  Designers  designed  to  browser  capabilities  - down  to  particular  minor 
versions  of  browsers. 

• Extensive  testing  was  needed  on  lots  of  browsers 

• Designers  used  tables,  nested  tables,  and  chopped  up  graphics  to  gain  control 
of  the  look  and  feel  or  web  pages  to  produce  a “print-like”  experience. 

• HTML  was  UGLY,  Hard  to  develop,  and  brittle  - what  looked  superb  on  one 
browser  - often  was  broken  on  another  browser  - even  a later  release  of  the 
same  b rower. 


The  Modern  Era 


• HTML  is  clean  and  simple 

• There  is  no  presentation  in  HTML  - font,  color,  spacing,  etc  etc 

• No  use  of  tables  except  for  tabular  data 

• CSS  controls  all  layout,  and  look  and  feel 

• Still  a bit  challenging  - but  converging 


What  does  this  mean  for  us? 


• Don’t  bother  with  the  intermediate  steps  :) 

• Either  keep  it  simple  - or  do  it  well  - simple  does  work 

• If  you  want  a professional  site  use  all  of  the  best  practices 

• Presentation  in  CSS  + Semantic  markup  in  HTML 

• http://validatorw3.org/ 


• http://jigsaw.w3.org/css-validator/ 


XHTML  = HTML  as  XML 


• close  all  tags 

• nest  tags  appropriately 

• lower  case  attribute  names  (onclick,  selected,  white-space...) 

• no  attribute  shortcuts  (selected  vs  selected="selected") 

• http://www.w3  school  s.com/xhtm  l/xhtm  l_syntax.asp 


This  site  contains  a bunch  of  stuff  including  software,  television  shows,  and 
other  miscellaneous  material.  This  also  includes  a number  of  activities  and  sites 
which  I have  done  with  my  good  friend  Richard  Wiggins. 


Now  Playing  on  Netfact  TV 


Quick  Links 


Chuck's  TV  and  Media 
Chuck's  Talks 
Chuck's  Book 
Chuck's  Columns 
Resume  and  Bio 
Blog  (20-Sep  10:01) 
Chuck's  Papers 

Sakai  Project 
Sakai  Planet  Blog 


Recent  Video:  Dr.  Chuck  Goes  Motocross  Racing 

Funny  Video:  Mandy  Birthday  Project  - Remix 

Updated:  Community  Information  Tool  Kit  • Building  Community 


Web/Multimedia  sites 
A Film  About  Brent  and  His  ATV 
How  to  install  a hardwood  floor  In  4 minutest 
Dr.  Chuck  goes  motocross  racing  (2007) 

Dr.  Chuck  goes  stock  car  racing  (2002) 

Audition  Tape  which  we  sent  to  TechTV  which  was  rejected  :(. 

Making  a Simple  Cartoon  Three  short  animations  from  Chuck  and  Brent. 
Nuthin'  But  Net  A Television  show 

NewsTalk  870  - Rich  and  I were  on  the  redo  once  per  month  from  the  mid  90's 
through  2004. 

More  Multimedia  Projects... 

Software  Tools 

PHP  Image  software  for  v300  and  Treo-600  SMS 
ClipBoard-2000  - Distance  Education  Software 
Sync-O-Matlc  2000  - Distance  Education  Software 
Other  software  Tools 

Projects 

Practical  Home  Networking  • A book  that  Chuck  and  Rich  almost  got  written. 
(Version  1,  Version  2,  Version  3,  and  Version  4) 

The  Community  Information  Toolkit  - A project  to  provide  public  libraries  and 
other  organizations  a start  on  using  Internet  in  Commmunity  Networking. 


Online  Lecture:  HTML  Overview 

Production  date:  1997  This 
lecture  provides  a basic 
overview  of  HTML  and  its  use. 
This  Is  a lecture  from  a folly* 
online  course  on  the  Internet 
and  technology.  Lecturer 
Charles  Severance  Details:  50 
minutes,  Real  Media  28kbps. 
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Photo  log  last  update:  September  24  2007  09:21:39  PM 
Blog  last  update:  September  20  2007  10:01:30  PM 


W5C- 


Markup  Validation  Service 

Check  the  markup  (HTML,  XHTML)  of  Web  documents 


Jump  To:  Important  Warnings  Validation  Output 


This  page  is  not  Valid  (no  Doctype  found)! 


Result:  Failed  validation,  47  Errors 


7’ 


Address:  http://www.dr-chuck.com/ 

Encoding  : Utf-8  (detect  automatically) 

Doctype  : (no  Doctype  found)  [ (detect  automatically) 

Root  Element:  html 


<HTML> 

<HEAD> 

<META  NAME="GENERATOR"  CONTENT ="Adobe  PageMill  3.0Win"> 

<TITLE>dr-chuck.com  </TITLE> 

</HEAD> 

<BODY  BGCOLOR="#000000"  LI N K="#AAAAAA"  VLI N K="#AAAAAA"  ALINK="#AAAAAA"> 
<table  Border=0> 

<tr> 


University  of  Michigan 


-'5'  Google 


CD  CT  Sakai  Collab  Source  Zam  Confluence  Samovar  Bugs  scoot  scl  Cafe  Pluto  S:8080  PDA  Math 
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Jjniversity  of  Michigan 


SCHOOLS.  COLLEGES,  & DEPARTMENTS 


HEALTH  & MEDICAL  RESOURCES 


8TATE  & COMMUNITY  PARTNERSHIPS 


MICHIGAN  FOCUS:: 

I President  Mary  Sue  Coleman 


- Regents  praise  Coleman's  tenure;  President 
returns  pay  raise 


CAMPAIGN 

QUICK  LINKS:: 


W3C’ 


Markup  Validation  Service 

Check  the  markup  (HTML,  XHTML)  of  Web  documents 


Jump  To:  Congratulations  • Icons 


This  Page  Is  Valid  XHTML  1 .0  Strict! 

Result: 

Passed  validation 

Address : 

http : //www . umich . edu/ 

Encoding : 

iSO-8859-1  (detect  automatically) 

Doctype : 

XHTML  1 .0  Strict  (detect  automatically)  X ' 

Root  Element: 

html 

Root  Namespace: 

htto://www.w3.ora/1 999/xhtml 

<!DOCTYPE  html  PUBLIC  "-//W3C//DTD  XHTML  1.0  Strict//EN"  "http:// 
www.w3.org/TK/xhtml  I /DTD/xhtml  I -strict.dtd"> 

<html  xmlns="http://www.w3.org/ 1 999/xhtml"  xml:lang="en"> 

<head> 

<title>University  of  Michigan</title> 


Which  DOCTYPE? 


• Easy  to  start  a fight  - just  Google  “what  is  the  best  doctype” 

• Loose  - legacy 

• Transitional  - Mix  of  Developers 

• Strict  - New  Project  which  can  enforce  rules  from  the  start 

• http://www.webmasterworld.com/html/306 1 635.htm  (and  others) 


A Simple  but  Modern  Page 


<!DOCTYPE  html  PUBLIC  "-//W3C//DTD  XHTML  1.0  Strict//EN" 
"http://www.w3.org/TR/xhtml  l/DTD/xhtml  I -strict.dtd"> 

<html  xmlns="http://www.w3.org/ 1 999/xhtml"> 

<head> 

<title>My  Document Title</title> 

<meta  http-equiv="Content-Type"  content-'text/html;  charset=utf-8"  /> 
</head> 

<body> 

</body> 

</html> 


The  Basic  Outline 


<!DOCTYPE ...  > 

<html> 

<head> 

<!-  Describes  and  sets  up  the  document  --> 
</head> 

<body> 

<!-  The  document  to  be  displayed  --> 
</body> 

</html> 


<!DOCTYPE  html  PUBLIC  "-//W3C//DTD  XHTML  1.0  Strict//EN" 
"http://wvs^w.w3.org/TR/xhtnnl  I /DTD/xhtml  I -strict.dtd"> 

<html  xmlns=,lhttp://www.w3.org/ 1 999/xhtml"> 

<head> 

<title>The  Most  Basic  Web  Page  in  the  World</title> 

<meta  http-equiv="Content-Type"  content="text/html;  charset=utf-8"  /> 
</head> 

<body> 

<hl>The  Most  Basic  Web  Page  in  the  World</h  I > 

<p>This  is  a very  simple  web  page  to  get  you  started. 

Hopefully  you  will  get  to  see  how  the  markup  that  drives 
the  page  relates  to  the  end  result  that  you  can  see  on 
screen.</p> 

<p>This  is  another  paragraph,  by  the  way.  Just  to  show  how  it 
works.</p> 

</body> 

</html> 


Begin  Tag 
End  Tag 
Attribute 


Whitespace  and  end  lines  do  not  matter  except  in  attributes. 


<body> 


<hl>The  Most  Basac  Web  Face  ar.  the  World</hl> 

1 

<p>This  is  a very  sample  web  pace  to  get  you  started.  Hopefully 
you  wall  cet  to  see  how  the  markup  that  drives  the  page 
relates  to  the  end  result  that  you  can  see  on  screen. </p> 

ilJ-  <p>Thas  as  another  paragraph,  by  the  way.  Just  to  show  how  it 

element  works. </P> 

</body> 

</html> 


The  Most  Basie  Web  Page  in  the  World 


This  is  a very  simple  web  page  to  get  you  started.  Hopefully  you  will  get  to  see  how  the 
markup  that  drives  the  page  relates  to  the  end  result  that  you  can  see  on  screen. 

This  is  another  paragraph,  by  the  way.  Just  to  show  how  it  works. 


P 

element 


Browser  Text  Flow 


n r>  n 


The  Most  Basic  Web  Page  in  the  World 


file:///Volumes/UserHome/Users/csev.  * Q r Google 
DP  CT  Sakai  Collab  Source  Zam  Confluence  » 


The  Most  Basic  Web  Page 
in  the  World 

This  is  a very  simple  web  page  to  get  you  started. 
Hopefully  you  will  get  to  sec  how  the  markup  that  drives 
the  page  relates  to  the  end  result  that  you  can  see  on  screen. 

This  is  another  paragraph,  by  the  way.  Just  to  show  how  it 
works. 


r~\  The  Most  Basic  Web  Page  in  the  World 

| | | (5  | ( C | [ + ] •*’ file:///Volumes/UserHome/Users/csev/De:  * Q.- 

DP  CT  Sakai  Collab  Source  Zam  Confluence  Samovar  Bugs  scoot  scl  » 

The  Most  Basic  Web  Page  in  the  World 

This  is  a very  simple  web  page  to  get  you  started.  Hopefully  you  will  get  to  sec  how  the 
markup  that  drives  the  page  relates  to  the  end  result  that  you  can  see  on  screen. 

This  is  another  paragraph,  by  the  way.  Just  to  show  how  it  works. 


The  browser  wraps  lines  based  on  its  width  - resizing  the  browser 

dynamically  re-wraps  lines. 


Header  Levels 


<h  I >First  Major  Heading</h  I > 
<h2>First  Subheading</h2> 
<h2>Second  Subheading</h2> 
<h3>A  Sub-subheading</h3> 

<h  I >Another  Major  Heading</h  I > 
<h2>Another  Subheading</h2> 


□ First  Major  Heading 

□ First  Subheading 

□ Second  Subheading 
□ A Sub-subheading 

□ Another  Major  Heading 

□ Another  Subheading 


Headers  were  very  ugly  in  default  rendering  - most  folks  started  with  <h3>. 


<body> 

<h  I >Lists  - an  introduction  </h  I > 

<p>Here's  a paragraph.  A lovely,  concise  little  paragraph. </p> 
<p>Here  comes  another  one,  followed  by  a subheading. </p> 
<h2>A  subheading  here</h2> 

<p>And  now  for  a list  or  two:</p> 

<ul> 

<li>This  is  a bulleted  list</li> 

<li>No  order  applied</li> 

<li>Just  a bunch  of  points  we  want  to  make</li> 

</ul> 

<p>And  here's  an  ordered  list:</p> 

<ol> 

<li>This  is  the  first  item</li> 

<li>Followed  by  this  one</li> 

<li>And  one  more  for  luck</li> 

</ ol> 

</body> 


Lists 


With  CSS  layout  - lists  are  lists 


<body> 

<p>l  really,  <em>really</em>  like  this  XHTML  stuff.</p> 

<!— Added  emphasis  using  the  em  element.  Handy  one,  that!  — > 

</body> 

<body> 

<h  I >Current  Stock</h  I > 

<p>The  following  items  are  available  for  order:</p> 

<ul> 

<li>Dark  Smoke  Window  Tinting</li> 

<li>Bronze  Window  Tinting</li> 

<!—  <li>Spray  mount</li> 

< I i > C raft  knife  (pack  of  5)</li>  — > ^ Q pp  pp  0 p 

</ul> 

</body> 


Symbols 


<body> 

<p>Our  current  stock  of  craft  knives  &gt;  our  stock  of  spray 
mounts,  but  we  still  need  to  get  both  of  them  in  as  soon 
as  possible!</p> 

</body> 


Entity 

Symbol 

&gt; 

> 

&lt; 

< 

&amp; 

& 

&pound; 

£ 

&copy ; 

© 

&trade; 

TM 

Images 


<h2>Welcome  to  our  super-dooper  Scuba  site</h2> 

<p><img  src="divers-circle.jpg"  width="200"  height="  1 62" 
alt="A  circle  of  divers  practice  their  skills"  /></p> 

<p>Glad  you  could  drop  in  and  share  some  air  with  us!  You've 
passed  your  underwater  navigation  skills  and  successfully 
found  your  way  to  the  start  point  - or  in  this  case,  our  home 
page.</p> 


In  this  case,  the  file  divers-circle.jpg  needs  to  be  in  the  same 
directory  as  the  file  index.html. 


<h2>Welcome  to  our  super-dooper  Scuba  site</h2> 

<p><img  src="divers-circle.jpg"  width="200"  height="  1 62" 
alt="A  circle  of  divers  practice  their  skills"  /></p> 

<p>Glad  you  could  drop  in  and  share  some  air  with  us!  You've 
passed  your  underwater  navigation  skills  and  successfully 
found  your  way  to  the  start  point  - or  in  this  case,  our  home 
page.</p> 

Welcome  to  our  super-dooper  Scuba  site 


Glad  you  could  drop  in  and  share  some  air  with  usl  You've  passed  your  underwater  navigation  skills  and  successfully  found 
your  way  to  the  start  point  - or  m this  case,  our  home  page 


Begin  Tag 


Where  to  find  the  image 


<img  src="divers-circle.jpg" 
width="200"  height="  1 62" 
alt="A  circle  of  divers  practice  their  skills" 

/> 


Optional  - makes 
display  quicker. 
Will  resize  to  fit. 


End  Tag 


Show  this  when  hovering,  images  are  off,  or  for 

screen  readers. 


All  information  is  communicated  through  the  attributes  of  the  img  tag. 


Paragraphs  and  Divs 


<p>This  is  a paragraph. </p> 

<div>This  looks  like  a paragraph,  but  it's  actually  a div.</div> 
<p>This  is  another  paragraph. </p> 

<div>This  is  another  div.</div> 


This  is  a paragraph 

This  looks  lice  a paragraph;  but  it's  actually  a dr. 
This  is  another  paragraph 


Think 


This  is  a paragraph 


This  looks  like  a paragraph,  but  it's  actually  a div 


This  is  another  paragraph 


This  is  another  div 


This  is  another  div 


div  as  Container 

<div> 

<p>This  is  a paragraph  inside  a div.</p> 

<p>So  is  this.</p> 

</div> 

<div  id="header"> 

<h  I >BubbleUnder.com</h  I > 

<p>Diving  club  for  the  south-west  UK</p> 
</div> 


“div”  stands  for  “division”  as  it  allows  us  to  divide  our  page  into  parts  or  sections  and  then  do 

something  different  with  each  “section”. 


Nested  divs 


<div  id="outer"> 

<div  id="nested  I "> 

<p>A  paragraph  inside  the  first  nested  div.</p> 
</div> 

<div  id="nested2"> 

<p>A  paragraph  inside  the  second  nested  div.</p> 
</div> 

</div> 


Adding  divs  give  us  a “handle”  to  apply  styling  (CSS)  to  a block  of  text. 


<body> 

<div  id="header"> 

<div  id="sitebranding"> 

<h  I >BubbleUnder.com</h  I > 

</div> 

<div  id="tagline 

<p>Diving  club  for  the  south-west  UK  - let's  make  a 
splash!</p> 

</div> 

</div>  <!--  end  of  header  div  --> 

<div  id="bodycontent"> 

<h2>Welcome  to  our  super-dooper  Scuba  site</h2> 
<p><img  src="divers-circle.jpg"  width="200" 
height="  1 62" 

alt="A  circle  of  divers  practice  their  skills"  /></p> 
<p>Glad  you  could  drop  in  and  share  some  air  with  us! 
You've  passed  your  underwater  navigation  skills  and 
successfully  found  your 


way  to  the  start  point  - or  in  this  case,  our  home 
page.</p> 

<h3>About  Us</h3> 

<p>Bubble  Under  is  a group  of  diving  enthusiasts  based 
in  the  south-west  UK  who  meet  up  for  diving  trips  in 
the  summer  months.</p> 

<p>When  we're  not  diving,  we  often  meet  up  in  a local 
pub  to  talk  about  our  recent  adventures  (any  excuse, 
eh?).</p> 

<h3>Contact  Us</h3> 

<p>To  find  out  more,  contact  Club  Secretary  Bob 
Dobalina  on  0 1 793  64 1 207  or 
<a  href="mailto:bob@bubbleunder.com">email 
bob@bubbleunder.com</a>.</p> 

</div>  <!—  end  of  bodycontent  div  — > 

</body> 


Indicating  Meaning 


Multiple  Files 


si-csev-mbp : -/Desktop/sample/split  csev$  Is  -1 
total  128 


-rw-r- 

-r — 

1 

csev 

csev 

1487 

Sep 

26 

-rw-r- 

-r — 

1 

csev 

csev 

959 

Sep 

26 

-rw-r- 

-r — 

1 

csev 

admin 

51747 

Sep 

26 

-rw-r- 

-r — 

1 

csev 

csev 

1169 

Sep 

26 

si-csev-mbp : -/Desktop/sample/split  csev$ 


04:41  about . html 
04:39  contact.html 
04:41  divers-circle.jpg 
04:39  index.html 


Special  File  Names 

• When  a URL  points  to  a directory  in  your  web  server,  it  looks  for  a 
file  with  a special  name: 

• index.html,  index.htm,  index.php,  default.htm,  etc.. 

• While  there  is  a convention,  the  “default  file”  is  configurable  - so 
nothing  is  “sure” 

• Usually  index.htm  or  index.html  is  a safe  bet 

• This  only  works  when  viewing  through  a web  server  - when  viewing 
from  disk,  you  must  view  the  file. 


Links  Between  Files 


<div  id-  "site  idi  i > 

<hl>Bubblel)nder . com</hl> 

</div> 

<div  icU' tagline 1 > 

<p>Diving  club  for  the  south-west  UK  - let's  make  a splash !</p> 
</div> 

</div>  ' c v ■ 

<div  ic^  ivigation  > 

<ul> 

<lixa  href-  'ind  jx  >Hocne</ax/li> 

<lixa  href-  >About  Us</ax/li> 

<lixa  href-  >Contact  Us</ax/li> 

</ul> 

</div>  d w 

<div  id-  bodycontent  > 

<h2>Nelcome  to  our  super-dooper  Scuba  site</h2> 

<pximg  src- 'divers-ci  ’cle.jpg" 

alt— "A  circle  of  divers  practice  their  skills" 

width-  2 height-  L62  /x/p> 

<p>Glad  you  could  drop  in  and  share  some  air  with  us!  You've 


ry  ry  Bubble  Under  - The  diving  club  for  the  south-west  UK 
[ < ► ] [ ffr  ] ^ file:///Volumes/UserHome/Users,©  " CV  Google 
CQ  CT  Sakai  Collab  Source  Zam  Confluence  Samovar  Bugs  » 


BubbleUnder.com 


Diving  club  for  the  south-west  UK  - let's  make  a splash! 


• Home 

• About  Us 

• Contact  Us 


Welcome  to  our  super-dooper  Scuba  site 


Glad  you  could  drop  in  and  share  some  air  with  us!  You've  passed  your 
underwater  navigation  skills  and  successfully  found  your  way  to  the  start 
point  - or  in  this  case,  our  home  page. 


A 


Link  Anatom/ 


Start  Tag  Clickable  Text  End  Tag 


<a  href="about.html">  About  Us  </a> 


Where  to  go  when  link  is 
clicked  (an  attribute). 


Diving  club  for  the  south-west  UK 


Home 


About  Us 


Contact  Us 


We  will  make  this  pretty  later  with  CSS. 


Navigating 


i o o o 

Bubble  Under  - The  divin...b  for  the  south-west  UK 

r\  n 

1 ^ About  Bubble  Under:  who  ...e,  what  this  site  is  for 

g«  | V~V  ^ 

Contact  Us  at  Bubble  Under 

••  file:///Volumes/UserHome/Users/©  * Or  Google  » 

i- 

| * file:///Volumes/UserHome/Users/©  * Qr  Google 

» ■* 

- ) file:///Volumes/UserHome/Users/©  “ Qr  Google  » 

ra  cr 

Sakai  Collab  Source  Zam  Confluence  Samovar  » 

OQ 

CT  Sakai  Collab  Source  Zam  Confluence  Samovar 

cn 

CT  Sakai  Collab  Source  Zam  Confluence  Samovar  » 

BubbleUnder.com 


Diving  club  for  the  south-west 

• Home 

• About  Us 

• Contact  Us 


Welcome  to  our  super-dooper  Scuba 
site 


Glad  you  could  drop  in  and  share  some  air  with  us!  You've 
passed  your  underwater  navigation  skills  and  successfully  found 
your  way  to  the  start  point  - or  in  this  case,  our  home  page. 


BubbleUnder.com 


Bubble  Under  is  HRusiasts  based  in  the  south- 
west UK  who  m<  )s  in  the  summer  months  when 

the  weather  isjm  ills  arc  flowing.  We  arrange 

s small  groups  to  cut  the  costs  of  accommodation 
1 and  to  ensure  that  everyone  gets  a trustworthy  dive 

buddy. 

Although  we're  based  in  the  south-west,  we  don't  stay  on  our  own 
turf:  past  diving  weekends  away  have  included  trips  up  to  Scapa 
Flow  in  Scotland  and  to  Malta's  numerous  wreck  sites. 

When  we're  not  diving,  we  often  meet  up  in  a local  pub  to  talk 
about  our  recent  adventures  (any  excuse,  eh?). 


BubbleUnder.com 


Diving  club  for  the  south-west  UK  - let's  make  a splash! 


Contact  Us 

To  fmd  out  more,  contact  Club  Secretary  Bob  Dobalina  on  01793 
641207  or  email  bob@bubblcundcr.com. 


E-Mail  Links 


<p>To  find  out  more,  contact  Club  Secretary  Bob  Dobalina 
on  01793  641207  or 

<a  href="mailto:bob@bubbleundercom,l>email 


bob(a)bubbleunder.com</a>. 

Contact  Us 

</p> 

To  find  out  more,  contact  Club  Secretary  Bob  Dobalina  on 
01793  641207  or  email  bob@bubblcundcr.com. 

When  this  link  is  clicked  on,  the  browser  pops  up  a mail  client  with  the 
TO:  filed  in.  We  assume  the  user  has  a mail  client. 


<a  href="mailto:bob@bubbleunder.com"> 
email  bob@bubbleunder.com</a>. 


Contact  Us 


To  find  out  more,  contact  Club  Secretary  Bob  Dobalina  on 
01793  641207  or  email  bob@bubblcundcr.com. 


The  To:  address  comes  from  the  href,  not  the 
clickable  text. 


^ ^ New  Message 

© G ID  G ^ 

Attach  Address  fontsi^ Colors  Save  As  Draft 
To:  bob@bubbleunder.com 
Cc:~ 

Bcc:~ 

Subject: 


CD 


= ▼ Account:  Charles  Severance  <csev... 


Signature:  Normal 


Charles  Severance 
csev@umich.edu  www.dr-chuck.com 


//. 


Block  Quotes 


<blockquote> 

<p>"Happiness  is  a dip  in  the  ocean  followed  by  a pint  or  two  of 
Old  Speckled  Hen.You  can  quote  me  on  that!"</p> 

</blockquote> 

<blockquote  cite="http://www.petermoore.net/sftb/chapter  I .htm"> 
<p>lt  didn't  take  long  for  a daily  routine  to  form:  when  they 
left  for  work  in  the  morning  I'd  still  be  in  bed. And  when 
they  came  home  they'd  find  me  sitting  on  the  sofa,  drinking 
beer  and  watching  TV  soaps.</p> 

</blockquote> 


Strong  and  Emphasis 


<p>Although  Jimmy  was  told  to  <strong>never</strong> 
put  his  hands  on  the  exhaust  pipe,  he  <em>still</em> 
couldn't  help  himself.</p> 


Never  assume  that  strong  is  bold  and 
emphasis  is  italics.  Use  these  tags  to  mark 
*meaning*  not  formatting! 


Although  Jimmy  was  told  to 
never  put  his  hands  on  the 
exhaust  pipe,  he  still  couldn't 
help  himself. 


Break  Tags 

<p>The  limerick  packs  laughs  anatomical, <br  /> 
Into  space  that  is  quite  economical. <br  /> 

But  the  good  ones  I've  seen,<br  /> 

So  seldom  are  clean, <br  /> 

And  the  clean  ones  so  seldom  are  comical. </p> 


Use  <br/>  when  the  break  is  part  of  meaning  - do  not  use  to  manually  flow  text. 


<font  size=-l  face=arial  color=white> 

<font  face=Arial> 

Now  Playing  on  NetfactTV 
<br>&nbsp;  <br> 

<img  src=tci.gif> 

&nbsp;  <br> 

<font  color=yellow><br> 

Nuthin'  But  Net  Show  #6 
</font><br>&nbsp;<br> 

</font> 

</a> 

<P> 

<font  size=-2  color=white> 

This  is  a randomly  selected  show  from  our 
library  of  shows  - more  shows  will  be  added  as 
they  are  digitized. 


Some  bad  HTML. 


<font  color=orange> 

Updated: 

<a  href=http://www.dr-chuck.com/media.php? 
comment=top&id=39> 

<font  color=white> 

Community  Information  Tool  Kit  - Building 

Community  Networks 

</font> 

</a> 

</font> 

<BR> 

<BR>  &nbsp;  <br> 


Quick  Advertisement  - Firefox 


• You  pretty  much  need  to  use  Firefox  for  serious  website  development 

• Important  plugins: 

• Web  Developer  - Chris  Pedrick 

• FireBug  - Joe  Hewitt 


http://addons.mozilla.org/ 


ftOO 


J -w  ▼ ^3  i 

Latest  Headlines.^  Sakai 
<Q  Disable  * & Cookies  1 


dr-chuck. com 


D Charles  Severance 

JM 

BQUHQuick  Links 


fivfl  dr-chuck's 
■■tek  ^ photos 

www.flickr.com 


ri"B  man  This  site  contains  a bunch  of  stuff  includinq  software,  tel 
miscellaneous  material.  This  also  includes  a number  of  activities  and 
my  good  friend  Richard  Wiggins. 


' @ http://www.dr-chuck.com/  S'*  * H ’ Coogle 

dr-chuck.com  NWA  Chuck's  Medial  Sakai  Based  Service:...  iPhone  Navigation  Personal  Learning  an... 

_J  CSS  ’ JO  Forms  * a!  Images  * Information  * Miscellaneous  * Outline  * £ J Resize 

Outline  Frames 
Outline  Headings 
Outline  Links 
Outline  Tables 

Outline  Block  Level  Elements 


Tools  T View  Source  * Optio 


Recent  Video: 

John  Merlin  Williams  Goes  Street  Racim 

| Recent  Video: 

Dr.  Chuck  Goes  Motocross  Racing  on  hi 

Chuck's  TV  and  Media 
Chuck’s  Talks 
Chuck's  Book 
Chuck's  Columns! 
Resume  and  Bio 
Blog  (26-Nov  11:44) 
Chuck's  Papers 

UM  School  of  Information 
Sakai  Planet  Blog 


Teaching 

SI  182  - Building  Applications  for  Information  Environments 
SI  539  - Design  of  Complex  Web  Sites  (Rails) 

SI  543  - Introductory  Programming  (Java)  (Login) 

See  also  www.rubylearn.com  and  my  raw  course  podcasts 


✓ Outline  Deprecated  Elements 


Outline  Positioned  Elements 

Outline  Current  Element 
Outline  Custom  Elements... 


Web/Multimedia  sites 
A Film  About  Brent  and  His  ATV 
How  to  Install  a hardwood  floor  In  4 minutes! 

Dr.  Chuck  goes  motocross  racing  (2007) 

Dr.  Chuck  goes  stock  car  racing  (2002) 

Audition  Tape  which  we  sent  to  TechTV  which  was  rejected  :(. 

Making  a Simple  Cartoon  Three  short  animations  from  Chuck  and  Brent. 

Nuthin’  But  Net  A Television  show 

NewsTalk  870  - Rich  and  I were  on  the  radio  once  per  month  from  the  mid  90's  through  2004. 
More  Multimedia  Projects... 

p: 

Software  Tools 

PHP  image  software  for  v300  and  Treo-600  SMS 
ClipBoard-2000  - Distance  Education  Software 
Sync-O-Matic  2000  - Distance  Education  Software 

Other  software  Tools 

□ ; 

Projects 

Practical  Home  Networking  - A book  that  Chuck  and  Rich  almost  got  written.  (Version  1, 


✓ Show  Element  Names  When  Outlining 


n 


Done 


kai  and 

uPortal  at  UNISA  - Johan  van 
den  Berg 

Produced:  June  6.  2006  This 
video  was  taped  while  are  the 
Sakai  meeinq  in  Vancouver. 
Johan  discusses  their  upcominq 
project  to  inteqrate  uPortal  and 
Sakai  to  produce  the  UNISA 
campus  portal.  Johan  attended 
both  the  Sakai  and  JA-Siq 
meetinqs  and  descibed  the 
UNISA  approach  to  both 
cmmunities.  Details:  3 minutes, 
Windows  Media  300  kbps. 

This  is  a randomly  selected  show 


-J  o 


Summary 


• HTML  has  gone  through  many  changes  and  evolutions 

• It  started  clean  and  simple  - then  got  ugly  and  nasty  - now  we  are 
back  to  a clean  and  simple  approach 

• HTML  Markup  needs  to  focus  on  meaning  - not  formatting 

• Formatting  is  handled  using  CSS  - Cascading  Style  Sheets 


